<template>
 <ul class="product-list clearfix">
    <li class="product-item" v-for="(product,index) in productList" :key="index">
        <router-link to="/goodDetail">
            <div class="pro-wrap">
                <div class="pro-img">
                    <img v-lazy="product.picUrl">
                </div>
                <p class="pro-space"></p>
                <h4 class="pro-title ui-ellipsis">{{product.mpName}}</h4>
                <p class="pro-price">
                    <span class="price">￥{{product.price}}</span>
                </p>
                <i class="icon-cart icons4"></i>
            </div>
        </router-link>
    </li>
</ul>
</template>
<script>
export default{
    props:{
        productList:Array
    }
}
</script>
<style>
img[lazy='loading']{
    background: url('../../../static/imgs/osmfymhm31rn9gwmxgtvtlp60qgzmath.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
}
.product-list{
    min-height: 400px;
    padding:0 .06rem 0 .15rem;
    overflow:hidden;
}
.product-item{
    padding: .09rem .09rem 0 0;
    margin-bottom:.03rem;
    width:50%;
    float:left;
    box-sizing:border-box;
}
.product-item img{
	width: 100%;
}
.pro-wrap{
    padding: .12rem .09rem;
    position:relative;
    background-color:#fff;
}
.pro-img{
    padding-bottom:.11rem;

}
.pro-title{
    height:.16rem;
    font-size:.13rem;
    color:#333;
    line-height:.16rem;
    font-weight:400;
}
.pro-space{
    height:.18rem;
}
.pro-price{
    height:.21rem;
}
.pro-talk{
    height:.16rem;
}
.icon-cart{
    width:.25rem;
    height:.25rem;
    position:absolute;
    right:.08rem;
    bottom:.09rem;
    background-position:-.37rem -2.45rem;
    background-color:#fff;
}
.price{
    color:#ff6900;
    font-size:.16rem;
}
.talk-item{
    color:#ff6900;
}
.product-item a{
    display:block;
}
</style>